<template>
  <div
    id="top_banner"
    class="top_banner"
  >
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1">
        <router-link to="/">
          <!-- src="../assets/logo.png" -->
          <img
            src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2659902529,3989268441&fm=26&gp=0.jpg"
            alt=""
            class="logo"
          >
        </router-link>
      </el-menu-item>
      <el-menu-item index="2">
        <router-link to="/musicHall">音乐厅</router-link>
      </el-menu-item>
      <el-menu-item index="3">
        <router-link to="/mvHall">MV</router-link>
      </el-menu-item>
    </el-menu>

    <!-- 搜索框 -->
    <div class="search">
      <el-input
        v-model="input"
        placeholder="请输入查询的内容"
        @keyup.enter.native="toResult"
      ></el-input>
      <span class="iconfont icon-chaxun"></span>
    </div>
  </div>
</template>

<script>
import "../../public/icons/iconfont.css";

export default {
  data() {
    return {
      // 搜搜框值
      input: "",
      activeIndex: "1"
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    toResult() {
      if (!this.input) {
        this.$message.warning("请输入查询内容");
      } else {
        this.$router.push(`/result?keywords=${this.input}`);
      }
    }
  }
};
</script>

<style type="text/css">
.top_banner {
  width: 100%;
  height: 80px;
  position: relative;
  padding: 0px 30px;
  /* background-color: black; */
}
.top_banner .el-menu-demo .el-menu-item {
  height: 80px;
  width: 10%;
  text-align: center;
  line-height: 80px;
  font-size: 18px;
}
.top_banner .el-menu-demo .el-menu-item a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.top_banner .el-menu-demo .el-menu-item:first-child {
  border-bottom: none;
}
.top_banner .el-menu-demo .el-menu-item:first-child {
  margin-left: 30px;
  margin-right: 50px;
  width: 100px;
}
.top_banner .el-menu-demo .el-menu-item img {
  /* border-bottom: none; */
  width: 50px;
}
/* 搜索框 */
.top_banner .search .el-input {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 65px;
  width: 250px;
  /* 设置padding-right:30px没有生效 */
  /* padding-right: 30px; */
  box-sizing: border-box;
}

.top_banner .search span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 75px;
  z-index: 100;
  background-color: white;
  padding-left: 5px;
}
</style>